<template>
  <div class="Search">
    <div class="search-box">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <form action="/">
            <van-search show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel " shape="round" v-model="searchName" />
          </form>
        </template>
      </van-nav-bar>
    </div>
    <!-- 搜索历史框 -->
    <div v-if="shItemShow" class="searchHistory-box clearfix">
      <div class="searchHistory-item" v-for="(item,i) in searchHistory" :key="i">
        <div class="item-box" @click="searchGoods(item)">
          {{item}}
          <span @click.stop="searchHistory.splice(i,1)">
            <van-icon name="cross" />
          </span>
        </div>

      </div>
      <div class="clearSH-box">
        <div class="clearSH" @click="clearSH">清空所有搜索记录</div>
      </div>
    </div>
    <!-- 商品卡片页 -->
    <div class="searchGood-content">
      <div class="good" v-for="(good) in goodsData " :key="good.id" @click="jumpGoodPage(good.pid,good)">
        <!-- 上半图片部分 -->
        <div class="good_img">
          <img :src="good.smallImg" alt="">
          <!-- hot 图片 -->
          <div class="hot">
            热卖
          </div>
        </div>
        <!-- 下半文章部分 -->
        <div class="good_text">
          <div class="good_name">
            {{good.name}}
          </div>
          <div class="good_Ename">
            {{good.enname}}
          </div>
          <div class="good_price">
            ￥{{good.price}}
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import '@/assets/less/search.less'
import request from '@/utils/reques'
import '@/assets/less/good.less'
export default {
  name: 'Search',
  data() {
    return {
      searchName: '',
      // 存储搜索的历史内容
      searchHistory: [],
      goodsData: [],
      shItemShow: true
    }
  },
  components: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onCancel() {
      this.$router.go(-1)
    },
    async onSearch() {
      // 点击搜索框搜索商品的方法，获取输入框的内容
      // 轻加载提示要在方法里面使用
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.shItemShow = true
      // 记录搜索的内容
      this.searchHistory.push(this.searchName)
      if (this.searchHistory.length > 10) {
        this.searchHistory = this.searchHistory.splice(1, 10)
        // console.log(this.searchHistory)
      }
      // console.log(this.searchHistory)
      // console.log(this.searchName)

      try {
        const { data: res } = await request.get('/search', {
          params: { appkey: this.appkey, name: this.searchName }
        })
        // console.log(res)
        if ((res.code = 'Q001')) {
          // console.log(res.result)
          this.goodsData = res.result
        } else {
          this.$toast(res.result.msg)
        }
      } catch (error) {
        this.$toast.clear()
      }
    },
    async searchGoods(item) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        const { data: res } = await request.get('/search', {
          params: { appkey: this.appkey, name: item }
        })
        // console.log(res)
        if ((res.code = 'Q001')) {
          // console.log(res.result)
          this.goodsData = res.result
        } else {
          this.$toast(res.result.msg)
        }
      } catch (error) {
        this.$toast.clear()
      }
    },
    jumpGoodPage(pid, item) {
      this.$router.push({ name: 'Good', params: { pid } })
      item.time = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
      this.$store.commit('addTrackCount', item)
    },
    clearSH() {
      // 清空历史记录
      this.searchHistory = []
      this.shItemShow = false
    }
  }
}
</script>

<style lang="less" scoped>
</style>